(function (win, doc) {
  var oImgLisr = doc.getElementsByClassName("J_imgList")[0],
    data = JSON.parse(doc.getElementById("J_data").innerHTML),
    imgTpl = doc.getElementById("J_imgTpl").innerHTML,
    oImg = doc.getElementsByClassName("list-img");

  var init = function () {
    oImgLisr.innerHTML = renderList(data);
    bindEvent();
    setTimeout(function(){
        window.screenTo(0,0)
    },150)
  };
  function bindEvent() {
    window.onload = window.onscroll = function () {
      imgLazyLoad(oImg)();
    };
  }
  function renderList(data) {
    var list = "";
    data.forEach(function (elem) {
      console.log(elem);
      list += imgTpl.replace(/{{(.*?)}}/g, function (node, key) {
        return {
          img: elem.img,
          name: elem.name,
        }[key];
      });
    });
    return list;
  }
  init();
})(window, document);
function imgLazyLoad(image) {
  var imgLen = image.length,
    n = 0;

  return function () {
    var cHeight = document.documentElement.clientHeight,
      sTop = document.documentElement.scrollTop || document.body.scrollTop,
      imgItem;
    for (var i = n; i < imgLen; i++) {
      imgItem = image[i];
      console.log(imgItem);
      if (imgItem.offsetTop < cHeight + sTop) {
        console.log(imgItem.getAttribute("data-src"));
        imgItem.src = imgItem.getAttribute("data-src");
        imgItem.removeAttribute("data-src");
        n++
        console.log(n);
      }
    }
  };
}
